<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	.anchorBL{display:none;}
	*{padding: 0; margin: 0;}
	.search{position: absolute; top: 0; left: 0; padding: 20px; background-color: rgba(255,255,255,0.2);}
	/* li{list-style: none; border: #A7C0E0 solid 1px;} */
	.search ul{margin-top: 5%;}
	.search li{display: inline-block; background-color: #FFF; padding: 5px 20px; cursor: pointer;}
	.search input{font-family: "微软雅黑";}
	.contSear{width:300px;box-sizing: border-box;padding: 10px 20px;border:2px solid transparent;line-height: 20px;font-size: 16px;height: 38px;color: #333;position: relative;;outline: none;}
    .btSear{width: 80px; height: 35px; line-height: 35px; font-size: 18px; letter-spacing: 2px;}
	.comp{position: absolute; bottom: 0; left: 0; background-color: rgba(255,255,255,0.5); padding: 0 10px;}
	.comp img{width: 80px; height: 30px; float: left; padding: 5px;}
	.clearFloat{display: block; content: "" ; clear: both;}
	.comp p{float:left; font-size: 14px; color: #888; line-height: 40px;}
	</style>

	<style type="text/css">
		* { padding: 0; margin: 0; }
		.am-share { font-size: 14px; border-radius: 0; bottom: 0; left: 0; position: fixed; text-align: center; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 300ms; transition: transform 300ms ; width: 100%; z-index: 1110; }
		.am-modal-active { transform: translateY(0px);  -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) }
		.am-modal-out { z-index: 1109; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%) }
		
		.am-share-title { background-color: #f8f8f8; border-bottom: 1px solid #fff; border-top-left-radius: 2px; border-top-right-radius: 2px; color: #555; font-weight: 400; margin: 0 10px; padding: 10px 0 0; text-align: center; }
		.am-share-title::after { border-bottom: 1px solid #dfdfdf; content: ""; display: block; height: 0; margin-top: 10px; width: 100%; }
		
		.am-share-footer { margin: 10px; }
		.am-share-footer .share_btn { color: #555;  display: block; width: 100%; background-color: #e6e6e6; border: 1px solid #e6e6e6; border-radius: 0; cursor: pointer;  font-size: 16px; font-weight: 400; line-height: 1.2; padding: 0.625em 0; text-align: center; transition: background-color 300ms ease-out 0s, border-color 300ms ease-out 0s; vertical-align: middle; white-space: nowrap;font-family:"微软雅黑";  }
		
		.am-share-sns { background-color: #f8f8f8; border-radius: 0 0 2px 2px; margin: 0 10px; padding-top: 15px; height:auto; zoom:1; overflow:auto; }
		
		.am-share-sns li { margin-bottom: 15px; display: block; height: auto;  width: 100%;object-position: center; }
		
		.am-share-sns a { color: #555; display: block; text-decoration:none; }
		.am-share-sns span { display: block; }
		
		.am-share-sns li i { background-position: center 50%; background-repeat: no-repeat; background-size: 36px 36px; background-color: #ccc; color: #fff; display: inline-block; font-size: 18px; height: 36px; line-height: 36px; margin-bottom: 5px; width: 36px; }
		.am-share-sns .share-icon-weibo { background-image: url(); }
		
		.sharebg { background-color: rgba(0, 0, 0, 0.6); bottom: 0; height: 100%; left: 0; opacity: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 1100; display:none; }
		.sharebg-active { opacity: 1; display:block; }
		
	</style>

	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F8GGZGTAevRPL7BwLtTjQvEzdAlpzqTt"></script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=aabaebdaa3f9593c744686d57fda986e"></script> 
	<script type="text/javascript" src="../js/jquery.js"></script>
	
	<title>地图</title>
</head>
<body>
	<div id="allmap"></div>
	<div class="comp">
		
		<p>潞达世纪</p>
	</div>

	<!-- 弹框内容 -->
	<div class="am-share">
			<h3 class="am-share-title">导航到潞达快印</h3>
			<ul class="am-share-sns">
			  <li>
				  <a href="#">
					  <span onclick="openMapApp(1)">高德地图</span> 
				  </a> 
			  </li>
			  <li>
				  <a href="#">
					  <span onclick="openMapApp(2)">百度地图</span> 
				  </a> 
			  </li>
			  <li>
				  <a href="#">
					  <span onclick="openMapApp(3)">苹果地图</span> 
				  </a> 
			  </li>
			</ul>
			<div class="am-share-footer"><button class="share_btn">取消</button></div>
		  </div>
</body>
</html>
<script type="text/javascript">

	//判断访问终端
	var browser={
		versions:function(){
			var u = navigator.userAgent, app = navigator.appVersion;
			return {
				trident: u.indexOf('Trident') > -1, //IE内核
				presto: u.indexOf('Presto') > -1, //opera内核
				webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
				gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
				mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
				ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
				android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
				iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
				iPad: u.indexOf('iPad') > -1, //是否iPad
				webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
				weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
				qq: u.match(/\sQQ/i) == " qq" //是否QQ
			};
		}(),
		language:(navigator.browserLanguage || navigator.language).toLowerCase()
	}

	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(116.674798,39.915778), 17);  // 初始化地图,设置中心点坐标和地图级别	
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	var point = new BMap.Point(116.674798,39.915778);
	var marker = new BMap.Marker(point);  // 创建标注
	map.addOverlay(marker);              // 将标注添加到地图中
	map.centerAndZoom(point, 17);
	var opts = {
	  width : 200,     // 信息窗口宽度
	  height: 160,     // 信息窗口高度
	  title : "潞达世纪快印" , // 信息窗口标题
	}
	
	//移动端增加导航功能
	var bodyHtml = "地址:北京市通州区新华大街如意园底商14-7建行隔壁";
	//判断是否移动端
    if(browser.versions.mobile||browser.versions.android||browser.versions.ios){
		bodyHtml = "<div><span>                地址:北京市通州区新华大街如意园底商14-7建行隔壁        </span>     <br>  <img style='float: right; width:60px;height:50px;' src='../images/goto.png'  onclick='openList()'/>   </div>";
	}
	// pc端不展现导航按钮
	//bodyHtml = "<div><span>                地址:北京市通州区新华大街如意园底商14-7建行隔壁        </span>     <br>  <img style='float: right; width:60px;height:50px;' src='../images/goto.png'  onclick='openList()'/>   </div>";

	var infoWindow = new BMap.InfoWindow(bodyHtml, opts);  // 创建信息窗口对象 
	map.openInfoWindow(infoWindow,point);//初始开启信息窗口
	marker.addEventListener("click", function(){//按钮点击开启信息窗口
		map.openInfoWindow(infoWindow,point); 
	});
	var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});// 右上角，添加比例尺
	map.addControl(top_left_control);
	var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
	map.addControl(mapType1);
	var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}); //右上角，仅包含平移和缩放按钮
	map.addControl(top_right_navigation);
	var local = new BMap.LocalSearch(map, {
		renderOptions:{map: map}
	});
	//map.enableScrollWheelZoom(true); //全景添加卡网络
	// 覆盖区域图层测试 卡
	//map.addTileLayer(new BMap.PanoramaCoverageLayer());
	//var stCtrl = new BMap.PanoramaControl(); //构造全景控件
	//stCtrl.setOffset(new BMap.Size(20, 20));
	//map.addControl(stCtrl);//添加全景控件

	// ===================导航部分==========================

	function openList(){
		$(".am-share").addClass("am-modal-active");	
		if($(".sharebg").length>0){
			$(".sharebg").addClass("sharebg-active");
		}else{
			$("body").append('<div class="sharebg"></div>');
			$(".sharebg").addClass("sharebg-active");
		}
		$(".sharebg-active,.share_btn").click(function(){
			$(".am-share").removeClass("am-modal-active");	
			setTimeout(function(){
				$(".sharebg-active").removeClass("sharebg-active");	
				$(".sharebg").remove();	
			},300);
		})
	}	

	  // 打开地图App，开始导航
	  function openMapApp(type) {
        // 地图uri api数组
        var uri = new Array();
        if (browser.versions.android) {
            // 百度地图uri api
            uri[2] = "baidumap://map/navi?location=39.915778,116.674798&query=潞达世纪快印&coord_type=bd09ll&type=BLK&src=ios.baidu.openAPIdemo";
            // 高德地图uri api
            uri[1] = "androidamap://path?sourceApplication=123&did=B0FFILB373&dname=北京潞达世纪快印有限公司&t=0";
            // 腾讯地图uri api
            // uri[2] = "qqmap://map/marker?marker=coord:" + lat + "," + lng
            // + ";title:" + addr + "&referer=xlwx";
        } else if (browser.versions.ios) {
            // 百度地图uri api
            uri[2] = "baidumap://map/navi?location=39.915778,116.674798&query=潞达世纪快印&coord_type=bd09ll&type=BLK&src=ios.baidu.openAPIdemo";
            // 高德地图uri api
            //uri[1] = "iosamap://navi?sourceApplication=123&poiname=fangheng&poiid=B0FFILB373&lat=39.91093&lon=116.65737&dev=1&style=2";
			uri[1] = "iosamap://path?sourceApplication=123&did=B0FFILB373&dname=北京潞达世纪快印有限公司&t=0";
            // 腾讯地图uri api
            // uri[2] = "qqmap://map/marker?marker=coord:" + lat + "," + lng
            // + ";title:" + addr + "&referer=xlwx";
            // 苹果地图uri api
            uri[3] = "http://maps.apple.com/?sll=39.909783,116.668261&dirflg=d&daddr=中国北京市通州区如意园14-8、14-9";
        }
        //调用uri	
        if(uri.length == 0){
            return;
        }
		window.location.href = uri[type];
		window.parent.location.href=uri[type];
    }
</script>
